<template>
  <div
    class="home"
    :style="{
      width: `${bodyWidth}%`,
      height: `${bodyHeight}%`,
      backgroundImage: `url(${$store.state.bacIcon})`,
      backgroundSize: 'cover',
    }"
  >
    <!--装扮区-->
    <img
      class="floatDefault flagSty wow bounceIn"
      v-show="this.$store.state.flagOpen"
      :src="this.$store.state.flagIcon"
      alt=""
    />
    <img
      class="floatDefault yanhuaSty wow bounceIn"
      v-show="this.$store.state.yanHuaOpen"
      :src="this.$store.state.yanHuaIcon"
      alt=""
    />
    <!--熊猫人-->
    <div class="floatDefault catBox">
      <p
        class="floatTip wow fadeIn"
        data-wow-delay="1.5s"
        v-text="floatMsg"
      ></p>
      <!-- <img
        @click="touchCat"
        class="catSty wow fadeIn"
        data-wow-delay="0.5s"
        src="../assets/img/cat1.png"
        alt=""
      /> -->
      <lottie
        :options="defaultOptions"
        :height="200"
        :width="200"
        v-on:animCreated="handleAnimation"
      />
    </div>
    <!--食物区-->
    <div class="floatDefault" style="top: 69%; right: 5%">
      <dropTimer v-show="eatFlag" class="floatTimer" :duration-times="times" />
      <img class="eatBag" src="../assets/img/食物槽1.png" alt="" />
    </div>
    <!--    <img class="floatDefault eatBag" src="../assets/img/食物槽1.png" alt="">-->
    <!--底部按钮-->
    <img
      @click="playPop(1)"
      class="taskBtn"
      src="../assets/img/装扮.png"
      alt=""
    />
    <img
      @click="playPop(0)"
      class="showBtn"
      src="../assets/img/任务.png"
      alt=""
    />
    <div class="boomBox">
      <img
        @click="addEat"
        :class="toggleEatSty(eatFlag)"
        src="../assets/img/boom.png"
        alt=""
      />
      <h3 v-text="`${numBoombo}个`"></h3>
    </div>
    <!--测试按钮-->
    <!--    <van-button type="primary" @click="playPop(0)">任务</van-button>-->
    <!--    <van-button type="info" @click="playPop(1)">装扮</van-button>-->
    <van-button type="primary" @click="goAni">进入动画</van-button>
    <!--弹窗-->
    <pop-dialog
      :title="title"
      :type="typeSty"
      :task-list="taskArr"
      :show-obj="showArr"
      :add-obj="$store.state.pandaSty"
      ref="popDialog"
    />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import popDialog from "@/components/popDialog";
import useData from "@/components/utils/useData";
import dropTimer from "@/components/dropTimer";
import tool from "../tools/data";
import utils from "../components/utils/useData";
import * as pandaEat from "../jsonFiles/国庆-吃竹子.json";
export default {
  name: "Home",
  components: {
    HelloWorld,
    popDialog,
    dropTimer,
  },
  watch: {
    defaultOptions: {
      handler(newValue, oldValue) {},
      deep: true,
    },
    addArr: {
      handler(newValue, oldValue) {},
      deep: true,
    },
  },
  /**
   * @param [String] start: 用户喂养熊猫,吃竹子倒计时  用于控制 变量 eatFlag
   * @param [Arr] defaultOptions: 用于存放 熊猫动画状态、竹子数量
   */
  created() {
    let start = localStorage.getItem("start") || [];
    let defaultOptions = JSON.parse(localStorage.getItem("startDe")) || [];
    let pandaDecration = JSON.parse(localStorage.getItem("pandaDecration"));
    console.log("isis", pandaDecration);
    this.addArr = utils.pandaSty(utils.getVipShow, pandaDecration);
    console.log("jieguo", utils.pandaSty(utils.getVipShow, pandaDecration));
    this.defaultOptions = defaultOptions.length
      ? defaultOptions[0]
      : tool.pandaArr[0].defaultOptions;
    this.numBoombo = defaultOptions.length ? defaultOptions[1].numBoombo : 70;
    this.eatFlag = start.length ? true : false;
    this.times = Number(start) + 0.02 * 60 * 60 * 1000 - new Date().getTime();
    console.log(JSON.parse(localStorage.getItem("start")));
  },
  /**
   *  @param [Arr] taskArr: 用户获取竹子的 任务列表
   *  @param []
   */
  data() {
    return {
      bodyWidth: 100,
      bodyHeight: 100,
      taskArr: useData.taskList,
      showArr: this.$store.state.isVip ? [] : useData.showList,
      addArr: !this.$store.state.isVip ? [] : useData.getVipShow,
      typeSty: "选项栏",
      title: "做任务,领竹子",
      floatMsg: "hi,主人，我是你最爱的人吗？",
      times: 0,
      eatFlag: false,
      defaultOptions: tool.pandaArr[0].defaultOptions,
      animationSpeed: 1,
      anim: {},
      numBoombo: 70,
    };
  },
  methods: {
    playPop(id) {
      switch (id) {
        case 0:
          {
            (this.typeSty = "列表"), (this.title = "做任务,领竹子");
          }
          break;
        case 1:
          {
            (this.typeSty = "选项栏"), (this.title = "装扮区");
          }
          break;
      }
      this.$refs.popDialog.show();
    },
    touchCat() {
      this.floatMsg = "哎呀,主人,我饿了,快喂我点竹子...";
    },
    addEat() {
      let start = new Date().getTime();
      this.defaultOptions = tool.pandaArr[1].defaultOptions;
      this.numBoombo -= 20;
      let pandArr = tool.pandaArr[1].defaultOptions;
      let startInfos = [
        tool.pandaArr[1].defaultOptions,
        { numBoombo: this.numBoombo },
      ];

      this.eatFlag = true;
      localStorage.setItem("start", start);
      localStorage.setItem("styArr", JSON.stringify(pandArr));
      localStorage.setItem("startDe", JSON.stringify(startInfos));
      let begin = localStorage.getItem("start");
      this.$router.go(0);
      this.times = Number(begin) + 0.02 * 60 * 60 * 1000 - new Date().getTime();
    },
    goAni() {
      this.$router.push("/ani");
    },
    handleAnimation: function (anim) {
      this.anim = anim;
      console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
    toggleEatSty(flag) {
      return flag ? "boomBag1" : "boomBag";
    },
  },
};
</script>

<style scoped>
.home {
  transition: all 0.8s;
}
.home img {
  transition: all 0.6s;
}
.flagSty {
  width: 50px;
  top: 21%;
  left: 60%;
  height: auto;
  transition: all 0.6s;
}
.yanhuaSty {
  width: 100px;
  height: auto;
  left: 60px;
  top: 60px;
  transition: all 0.6s;
}
.catSty {
  width: 115px;
  height: 145px;
}
.catBox {
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.6s;
}

.floatDefault {
  position: absolute;
}
.eatBag {
  width: 60px;
  height: auto;
}
.taskBtn {
  position: fixed;
  bottom: 3%;
  width: 65px;
  height: auto;
  left: 5%;
  transition: all 0.2s;
}
.showBtn {
  position: fixed;
  left: 30%;
  width: 65px;
  height: auto;
  bottom: 3%;
  transition: all 0.1s;
}
.boomBag {
  width: 65px;
  height: auto;
  pointer-events: all;
}
.boomBag1 {
  width: 65px;
  height: auto;
  pointer-events: none;
}
.boomBox {
  width: auto;
  height: auto;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 3%;
  bottom: 0%;
}
.boomBox h3 {
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
}
.taskBtn:active,
.showBtn:active {
  transform: scale(1.1);
  opacity: 0.9;
}
.floatTip {
  width: auto;
  box-sizing: border-box;
  padding: 6px;
  height: 30px;
  background-color: #f5c623;
  border-radius: 15px;
  line-height: 25px;
  color: #ffffff;
  position: relative;
  font-size: 9px;
}
.floatTip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #f5c623;
  bottom: -6px;
  left: 50%;
}
</style>
